<template>
  <div class="album_main">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>个人中心</el-breadcrumb-item>
      <el-breadcrumb-item>我的相册</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="album_main">
      <vue-waterfall-easy
        ref="waterfall"
        :imgsArr="img_list"
        @scrollReachBottom="getData"
      >
        <template slot-scope="props">
          <div class="btn_wrap">
            <div
              class="bnt_copy bnt_img"
              :data-clipboard-text="props.value.src"
              @click="CopyQr_code"
            >
              <i class="el-icon-document-copy"></i>
            </div>
            <div class="btnDel bnt_img" @click="img_del(props)">
              <i class="el-icon-delete-solid"></i>
            </div>
          </div>
          <div class="demo-image__preview">
            <el-image
              :src="props.value.src"
              :preview-src-list="arr_preview"
            ></el-image>
          </div>
        </template>
      </vue-waterfall-easy>
    </div>
  </div>
</template>

<script>
import vueWaterfallEasy from "vue-waterfall-easy";
// 点击复制
import Clipboard from "clipboard";

export default {
  data() {
    return {
      // 图片信息对象
      fileInfo: {
        pagenum: 1,
        pagesize: 5,
        key: JSON.parse(sessionStorage.getItem("userinfo")).key,
      },
      fileList: [],
      // 瀑布流图片 数据列表
      img_list: [],
      arr_preview: [],
    };
  },
  components: {
    vueWaterfallEasy,
  },
  created() {
    this.getfileList();
  },
  methods: {
    // 获取图片对象列表
    async getfileList() {
      const { data: res } = await this.$http.get("/getimg", {
        params: this.fileInfo,
      });
      this.fileList = res.data.file;
      // 循环处理数据
      this.fileList.forEach((item, index) => {
        this.arr_preview.push(item.img_url);
        let obj = {
          src: item.img_url,
          id: item.id,
          // href: "javasrcipt:;",
        };
        // 将图片的url 添加到 图片预览数据
        this.img_list.push(obj);
        return;
      });
      this.fileInfo.total = res.data.total;
    },
    async getData() {
      this.fileInfo.pagenum++;
      const { data: res } = await this.$http.get("/getimg", {
        params: this.fileInfo,
      });
      if (res.meta.status != 200) {
        this.$message.error("已经没有数据了！");
        this.$refs.waterfall.waterfallOver();
        return;
      }
      res.data.file.forEach((item) => {
        let obj = {
          src: item.img_url,
          id: item.id,
        };
        this.img_list.push(obj);
      });
    },
    // 复制按钮事件
    CopyQr_code() {
      var clipboard = new Clipboard(".bnt_copy");
      clipboard.on("success", (e) => {
        this.$message.success("复制成功！");
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        this.$message.success("该浏览器不支持自动复制");
        // 释放内存
        clipboard.destroy();
      });
    },
    // 文件删除触发
    img_del(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const { data: res } = await this.$http.delete("/delfile", {
            params: { id: row.value.id },
          });
          if (res.meta.status != 200) {
            this.$message.error(res.meta.msg);
            return;
          }
          // this.getfileList();
          this.$message.success("删除成功!");
          this.img_list.splice(row.index, 1);
        })
        .catch(() => {});
    },
  },
};
</script>
<style scoped>
.album_main {
  width: 100%;
  height: 100%;
}
.bnt_img {
  margin: 10px 5px 0 5px;
  transform: translate(0px, -5px);
  width: 24px;
  height: 22px;
  text-align: center;
  line-height: 22px;
  border-radius: 3px;
  cursor: pointer;
}
.bnt_img i {
  font-size: 14px;
  color: #fff;
}
.bnt_copy {
  background: #23b7e5;
}
.btnDel {
  background: #f05050;
}
.btn_wrap {
  display: flex;
}
.demo-image__preview {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 20%;
  right: 0;
  overflow: hidden;
}
.el-image {
  width: 100%;
  height: 100%;
}
</style>
